
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        #DIV1{
            background-color: lightgreen;
            width: 100px;
            height: 100px
        }
        #DIV2{
             background-color: lightpink;
             width: 100px;
             height: 100px
         }
    </style>
    <script>
        window.onload=function () {
            document.getElementById("btn1").addEventListener("click", function () {
                document.getElementById("DIV1").style.display = 'block';
                document.getElementById("DIV2").style.display = 'none';
            });
            document.getElementById("btn2").addEventListener("click", function () {
                document.getElementById("DIV1").style.display = 'none';
                document.getElementById("DIV2").style.display = 'block';
            });
        }
    </script>
</head>
<body>
    <button id="btn1">隐藏粉色</button>
    <button id="btn2">隐藏绿色</button>
    <div>
        <div id="DIV1"></div>
        <div id="DIV2"></div>
    </div>
</body>
</html>